<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KSA评估系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <!-- 顶部导航栏 -->
        <nav class="bg-white shadow-lg rounded-lg mb-8">
            <div class="max-w-7xl mx-auto px-4">
                <div class="flex justify-between h-16">
                    <div class="flex items-center">
                        <h1 class="text-2xl font-bold text-gray-800">KSA评估系统</h1>
                    </div>
                    <div class="flex items-center">
                        <div class="ml-4 flex items-center md:ml-6">
                            <span class="text-gray-700 mr-4">欢迎，管理员</span>
                            <button class="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容区域 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- 部门卡片 -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">研发设计部门</h2>
                <ul class="space-y-2">
                    <li class="text-gray-600"><i class="fas fa-microchip mr-2"></i>电子电器</li>
                    <li class="text-gray-600"><i class="fas fa-bolt mr-2"></i>电动</li>
                    <li class="text-gray-600"><i class="fas fa-car mr-2"></i>车身</li>
                    <li class="text-gray-600"><i class="fas fa-cog mr-2"></i>底盘</li>
                    <li class="text-gray-600"><i class="fas fa-paint-brush mr-2"></i>饰件</li>
                </ul>
            </div>

            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">研发支持部门</h2>
                <ul class="space-y-2">
                    <li class="text-gray-600"><i class="fas fa-calculator mr-2"></i>CAE</li>
                    <li class="text-gray-600"><i class="fas fa-lightbulb mr-2"></i>前沿</li>
                    <li class="text-gray-600"><i class="fas fa-check-circle mr-2"></i>品质</li>
                    <li class="text-gray-600"><i class="fas fa-tools mr-2"></i>工艺</li>
                    <li class="text-gray-600"><i class="fas fa-project-diagram mr-2"></i>总体</li>
                    <li class="text-gray-600"><i class="fas fa-gavel mr-2"></i>法规</li>
                </ul>
            </div>

            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">运营支持部门</h2>
                <ul class="space-y-2">
                    <li class="text-gray-600"><i class="fas fa-money-bill-wave mr-2"></i>成本</li>
                    <li class="text-gray-600"><i class="fas fa-tasks mr-2"></i>项目</li>
                    <li class="text-gray-600"><i class="fas fa-building mr-2"></i>院办</li>
                    <li class="text-gray-600"><i class="fas fa-users mr-2"></i>人员</li>
                    <li class="text-gray-600"><i class="fas fa-industry mr-2"></i>试制</li>
                </ul>
            </div>

            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">培训体系</h2>
                <ul class="space-y-2">
                    <li class="text-gray-600"><i class="fas fa-user-tie mr-2"></i>中层经理</li>
                    <li class="text-gray-600"><i class="fas fa-user-shield mr-2"></i>科长</li>
                    <li class="text-gray-600"><i class="fas fa-user-graduate mr-2"></i>应届生</li>
                    <li class="text-gray-600"><i class="fas fa-chart-line mr-2"></i>开拓</li>
                    <li class="text-gray-600"><i class="fas fa-chalkboard-teacher mr-2"></i>讲师</li>
                </ul>
            </div>
        </div>

        <!-- 评分统计区域 -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
            <h2 class="text-xl font-semibold mb-4 text-gray-800">评分统计</h2>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                <div class="bg-blue-50 p-4 rounded-lg">
                    <h3 class="text-lg font-medium text-gray-700">我的评分</h3>
                    <p class="text-3xl font-bold text-blue-600">85</p>
                </div>
                <div class="bg-green-50 p-4 rounded-lg">
                    <h3 class="text-lg font-medium text-gray-700">人员总数</h3>
                    <p class="text-3xl font-bold text-green-600">256</p>
                </div>
                <div class="bg-yellow-50 p-4 rounded-lg">
                    <h3 class="text-lg font-medium text-gray-700">K项分数</h3>
                    <p class="text-3xl font-bold text-yellow-600">92</p>
                </div>
                <div class="bg-red-50 p-4 rounded-lg">
                    <h3 class="text-lg font-medium text-gray-700">A项分数</h3>
                    <p class="text-3xl font-bold text-red-600">78</p>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">进步最快的KSA柱状图</h2>
                <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
                    <p class="text-gray-500">图表区域</p>
                </div>
            </div>
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">需要学习的KSA柱状图</h2>
                <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
                    <p class="text-gray-500">图表区域</p>
                </div>
            </div>
        </div>

        <!-- 功能导航 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <a href="pages/rating.html" class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow card-hover">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">评分管理</h2>
                <p class="text-gray-600">进行自评和他评管理</p>
            </a>
            <a href="pages/ksa.html" class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow card-hover">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">KSA管理</h2>
                <p class="text-gray-600">管理知识、技能和能力</p>
            </a>
            <a href="pages/learning.html" class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow card-hover">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">学习管理</h2>
                <p class="text-gray-600">管理学习内容和进度</p>
            </a>
            <a href="pages/statistics.html" class="bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow card-hover">
                <h2 class="text-xl font-semibold mb-4 text-gray-800">统计分析</h2>
                <p class="text-gray-600">查看数据统计和分析</p>
            </a>
        </div>
    </div>
</body>
</html> 